<template>
    <van-nav-bar title="申请退货" left-text="" left-arrow @click-left="goBack" />
    <section class="aui-flexView">
        <!-- 订单详细 -->
        <section class="aui-scrollView">
            <!-- 订单状态 -->
            <div class="aui-pay-change">
                <div class="aui-flex">
                    <div class="aui-flex-box">
                        <h3>{{ detail.status_text }}</h3>
                    </div>
                    <div class="aui-pay-zfb">
                        <img src="/assets/images/icon-zfb.png" alt="" />
                    </div>
                </div>
            </div>

            <!-- 收货地址 -->
            <div class="aui-flex">
                <div class="aui-flex-add">
                    <img :src="detail.business.avatar_text" alt="" />
                </div>
                <div class="aui-flex-box">
                    <h3>
                        {{ detail.consignee }} <em> {{ detail.mobile }}</em>
                    </h3>
                    <p>{{ detail.region_text }}{{ detail.address }}</p>
                </div>
            </div>

            <!-- 申请退货 -->
            <div class="aui-commodity-bg">
                <div class="item">
                    <van-form @submit="onSubmit">
                        <van-cell-group inset>
                            <!-- 退款类型 -->
                            <van-field v-model="status_text" is-link readonly name="picker" label="退款类型"
                                placeholder="请选择退款类型" @click="showPicker = true" :rules="[{ required: true, message: '请选择退款类型' }]"/>
                            <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
                                <van-picker :columns="statulist" @confirm="onConfirm"
                                    @cancel="showPicker = false" />
                            </van-popup>

                            <!-- 退款原因 -->
                            <van-field v-model="business_reason" rows="2" autosize label="退款原因" type="textarea"  maxlength="50" placeholder="请输入退款原因" show-word-limit :rules="[{ required: true, message: '请填写退款原因' }]"/>

                        </van-cell-group>
                        <div style="margin: 16px;">
                            <van-button round block type="success" native-type="submit">
                                确认退货
                            </van-button>
                        </div>
                    </van-form>
                </div>
            </div>
        </section>
    </section>
</template>
<script setup>
const { proxy } = getCurrentInstance()
const goBack = () => { proxy.$router.push({
    path:'/order/index',
    query:{
        status:-1
    }})
}
const LoginUser = reactive(proxy.$cookies.get('LoginUser') ? proxy.$cookies.get('LoginUser') : {})
const orderid = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0;
const detail = ref({
    business: {},
    address: {}
})
const business_reason = ref('')
const status_text = ref('')
const showPicker = ref(false);
const statulist = [
    { text: '仅退款', value: '-1' },
    { text: '退款退货', value: '-2' }
];
const status = ref([]);
onBeforeMount(() => {
    getOrderInfoData()
})
const getOrderInfoData = async () => {
    let result = await Api.orderInfo({
        busid: LoginUser.id,
        orderid: orderid
    });

    if (result.code == 1) {
        detail.value = result.data
    }
}

const onConfirm = ({ selectedValues, selectedOptions }) => {
    status_text.value = selectedOptions[0]?.text;
    status.value = selectedOptions[0]?.value;
    showPicker.value = false;
};

const onSubmit = async() =>{
    let result = await Api.orderRefund({
        busid: LoginUser.id,
        orderid: orderid,
        business_reason: business_reason.value,
        status: status.value
    });
    if (result.code == 1) 
    {
        success({
            message: result.msg,
            onClose: () => {
                goBack()
            }
        });
    } 
    else 
    {
        error(result.msg);
    }
}
</script>
<style>
@import url('/assets/css/info.css');
</style>